<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>getSnapshotBeforeUpdate</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			class Demo extends React.Component{

				constructor(props){
					console.log('---constructor---')
					super(props)
					this.state = {sum:0}
				}

				render(){
					console.log('---render---')
					return (
						<div>
							<h2>当前求和为：{this.state.sum}</h2>
							<h3 ref="title">当前求和+1-3*100后的结果是：{(this.state.sum+1-3)*100}</h3>
							<button onClick={this.add}>+</button>
						</div>
					)
				}

				getSnapshotBeforeUpdate(){
					const title = this.refs.title
					console.log('---getSnapshotBeforeUpdate--',title.innerText)
					return title.innerText
				}

				componentDidUpdate(preProps,preState,x){
					const title = this.refs.title
					console.log('---componentDidUpdate---',preProps,preState,x,title.innerText)
				}

				add = ()=>{
					const {sum} = this.state
					this.setState({sum:sum+1})
				}
			}

			ReactDOM.render(<Demo x="尚硅谷"/>,document.getElementById('test'))
		</script>
	</body>
</html>